  <!-- 停车场 -->
<template>
  <div>
    <el-form :model="data" ref="form" label-width="150px" size="small" label-position="left" >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="事项" prop="chargeItemCode">
            <el-input  v-model="data.name" placeholder="请输入" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总收入" >
            <el-input  v-model="total" placeholder="请输入" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="付款方式" prop="paymentMethod"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
            <el-select v-model="data.paymentMethod" :placeholder="'请选择'"  :disabled="!isEdit">
              <el-option v-for="item in paymentMethod" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="首次付款时间" prop="firstPaymentDate"  :disabled="!isEdit"  :rules="{required: true, message: '请选择', trigger: 'blur'}">
            <el-date-picker v-model="data.firstPaymentDate" type="date" placeholder="请选择日期"> </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
        <!-- 收款计划 -->
      <div class="reimbursement-asset">
        <div class="reimbursement-asset-name">收款计划</div>
        <div v-if="isEdit" class="reimbursement-asset-name-btn"  @click="addPlan()">添加</div>
      </div>
      <div v-for="(item,index) in paymentItemListCloudDto" :key="index">
        <el-col :span="11">
          <el-form-item label="收款时间" prop="paymentDate">
            <el-date-picker  v-model="item.paymentDate" type="date" placeholder="请选择日期"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="收款金额" prop="paymentAmount" >
            <el-input type="number" v-model="item.paymentAmount" :placeholder="item.placeholder" @focus="focus(index)"  @blur="changePrice(index)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <div style="display: flex;justify-content: center;flex-direction: column;height:30px;line-height:30px;">
            <el-button type="text" @click="remove(index)"> 删除 </el-button>
          </div>
        </el-col>
      </div>
      <!-- 收款计划 end -->
      <div v-if="showFile">
        <el-col :span="24" style="min-height:50px;">
          <el-form-item label="附件" style="margin-bottom:0!important;">
            <el-upload class="upload-demo"  :file-list="fileList" action="no" :on-remove="handleRemove" :http-request="event => beforeupload(event.file)">
              <el-button type="primary" plain class="addSpan" style="margin-right: 10px" size="mini">上传附件</el-button>
            </el-upload>
            <el-button type="text" v-for="(file, i) in businessAttachmentMapListCloudDto" :key="i" @click="DownFile(file)">{{ file.fileTitle }} </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="height:50px;">
          <el-form-item label="提示："> {{ errorMessage.resultMessage }} </el-form-item>
        </el-col>
        <el-col :span="24" style="height:50px;">
          <el-form-item label="说明：">
            <el-input size="mini" type="textarea" autosize v-model="data.configDesc"></el-input>
          </el-form-item>
        </el-col>
      </div>        
      <el-col v-if="isEdit">
        <el-form-item>
          <div class="t-right padding-top-15" >
            <el-button  type="primary" size="small" @click="save('form')" plain>确定</el-button>
          </div>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import { uploadPhoto } from '@/api';
import Api from '../../../../api/incomeAndExpenditurePlan';
export default {
  props: {
    personData: {
      type: Object,
      default:()=>{},
    },
    assetCode:{
      type: String,
      default:'',
    },
    isEdit:{
      type: Boolean,
      default:false,
    },
  },
  data() {
    return {
      paymentMethod:[],
      errorMessage:{},
      total:0,
      showFile:false,
      fileList:[],
      planconstantMap:{},
      businessAttachmentMapListCloudDto:[],
      paymentItemListCloudDto:[],
      data:{},
    };
  },
 
  created(){
    this.getPaymentMethod()
  },
  methods: {
    init(){
      this.total=0
      this.data =Object.assign({}, this.personData.planAssetContractDto, this.personData.billConfigCloudDto) 
      this.businessAttachmentMapListCloudDto = this.personData.businessAttachmentMapListCloudDto || [] 
      this.fileList = this.personData.businessAttachmentMapListCloudDto || [] 
      this.paymentItemListCloudDto = this.personData.paymentItemListCloudDto || []

      let total = 0

      this.paymentItemListCloudDto.forEach(ele=>{
        if (!isNaN(Number(ele.paymentAmount))) {
          total = Number(total) + Number(ele.paymentAmount)
        }
      })

      this.total = Number(total).toFixed(2)

      if(this.businessAttachmentMapListCloudDto&&this.businessAttachmentMapListCloudDto.length>0){
        this.showFile = true
      }
      let t = setInterval(() => {
        if(this.$store.state.planconstantMap){
          this.planconstantMap = this.$store.state.planconstantMap
          clearInterval(t)
        }
      }, 1000);
    },
    async getPaymentMethod() {
      const res = await Api.constantPaymentMethod();
      this.paymentMethod = res.paymentMethod;
    },
   //保存
    async save() {
      this.$refs.form.validate(async isOK => {
        if (isOK) {
          let params ={
            assetCode:this.assetCode,
            planKey:this.$route.query.planKey,
            billConfigCloudDto:this.data,
            paymentItemListCloudDto:this.paymentItemListCloudDto,
            businessAttachmentMapListCloudDto:this.businessAttachmentMapListCloudDto
          }
          const res = await Api.configverify(params);
          if (res && res.success) {
            this.configverify = res;
            if (res.vilidateResult) {
              this.showFile = false
              this.search(params);
            } else {
              this.errorMessage = res
              this.showFile = true
              this.$message.warning('校验失败');
            }
          }
        }
      });
    },
    // 确定
    async search(params) {
      this.$refs.form.validate(async isOK => {
        if (isOK) {
          if (this.showFile) {
            if (this.businessAttachmentMapListCloudDto&&businessAttachmentMapListCloudDto.length>0 ) {
              this.$message.warning('文件和说明不能为空！');
              return;
            }
          }
          const res = await Api.create(params);
          if (res && res.success) {
            this.$emit('close-dialog2');
            this.closeDialog()
            this.$message.success(res.message);
          }
        }
      });
    },
    focus(index){
      this.num1 = this.paymentItemListCloudDto[index].paymentAmount || 0
    },
    changePrice(index){
      let num2 = this.paymentItemListCloudDto[index].paymentAmount  || 0

      let total = this.total
      total = Number(total) - Number(this.num1) + Number(num2)

      this.total = Number(total).toFixed(2)
    },
    addPlan(){
      this.paymentItemListCloudDto.push({
        paymentDate:'',
        paymentAmount:''
      })
    },
    remove(index){
      if(!this.isEdit){
        return
      }
      let num = this.paymentItemListCloudDto[index].paymentAmount || 0
      this.total = (Number(this.total)-Number(num)).toFixed(2)
      this.paymentItemListCloudDto.splice(index, 1);
    },
    beforeupload(file, a) {
      uploadPhoto(file).then(res => {
        this.fileList.push(file)
        this.businessAttachmentMapListCloudDto = [{ fileUrl: res.data.rows[0].url, fileTitle: res.data.rows[0].originalName, fileId: res.data.rows[0].key,uid:file.uid }];
        this.$message.success('上传成功');
      });
    },
    handleRemove(file){
      this.businessAttachmentMapListCloudDto.forEach(((ele,index)=>{
        if(ele.uid == file.uid){
          this.businessAttachmentMapListCloudDto.splice(index, 1)
        }
      }))
    },
    DownFile(file) {
      window.open(file.fileUrl);
    },
    closeDialog(){
      this.fileList = []
      this.businessAttachmentMapListCloudDto=[]
      this.paymentItemListCloudDto = []
    }
  },
};
</script>

<style lang="scss" scoped>
  .reimbursement-asset{
    display: flex;
    justify-content: flex-start;
    padding-left: 10px;
    margin-bottom: 20px;
    .reimbursement-asset-name{
      font-size: 16px;
      font-weight: 600;
      line-height: 30px;
      height: 30px;
    }
    .reimbursement-asset-name-btn{
      line-height: 30px;
      height: 30px;
      margin-left: 20px;
      color: #409EFF;
      cursor: pointer;
    }
  }
  .el-row .el-col {
    height: 50px;
  }

</style>
